<template>
	<view class="flex_row center" @click="onClick">
		<view hover-class="hover"
			:style="{'padding' : padding_vertical +'rpx ' + padding_horizon + 'rpx' ,'backgroundColor': !enable ? '#EFEFEF' : hollow ? 'white' : background_color,'color': !enable ? 'white' : hollow ? 'black' : 'white', 'fontSize':font_size+'rpx','borderRadius':'4rpx','border': !enable ? '' : hollow ? 'solid #CCD1D0 1rpx' : ''}">
			{{text}}
		</view>
		<!-- <button hover-class="hover_btn" :class="!enable ? 'btn' : 'pink_btn'" :style="{'padding' : padding_vertical +'rpx ' + padding_horizon + 'rpx','fontSize':font_size+'rpx','borderRadius':'4rpx','border': !enable ? '' : hollow ? 'solid #CCD1D0 1rpx' : ''}">{{text}}</button> -->
	</view>
</template>

<script>
	export default {
		name: "fl_button",
		data() {
			return {

			};
		},
		methods: {
			onClick() {
				this.$emit("onClick")
			}
		},
		props: {
			enable: {
				default: true,
				type: Boolean
			},
			text: {
				default: "确认",
				type: String
			},
			//是否镂空
			hollow: {
				default: false,
				type: Boolean,
			},
			padding_horizon: {
				default: 20,
			},
			padding_vertical: {
				default: 12,
			},
			background_color: {
				default: "#000000",
				type: String
			},
			font_size: {
				default: 26
			}
		}
	}
</script>

<style>
	
	.pink_btn{
		background:rgb(215, 29, 86);
	}
	
	.black_btn{
		background:rgb(23, 14, 15);
	}
	
	.enable_btn{
		background: rgb(239, 239, 239);
	}
	
	.text {
		font-size: 26rpx;
		color: white;
	}

	.hover_btn {
		background: rgb(230, 230, 230);
	}
	
	.btn{
		
	}
</style>
